import React from 'react';
import { Card, Typography, Form, Input, Button, Upload, Icon } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Map } from 'react-amap';

import { Export, Import, Download } from '@/components/Buttons';
import OperateButtons from '@/components/Buttons/OperateButtons';
import SearchBox from '@/components/AMap/SearchBox';
import Address from '@/components/AMap/Address';
import MapInput from '@/components/Inputs/MapInput';
import AddressInput from '@/components/Inputs/AddressInput';
import DraggerUpload from '@/components/Upload/DraggerUpload';
import AvatarUpload from '@/components/Upload/AvatarUpload';
import ImagesUpload from '@/components/Upload/ImagesUpload';
import ImageUpload from '@/components/Upload/ImageUpload';
import ImportUpload from '@/components/Upload/ImportUpload';
import FileUpload from '@/components/Upload/FileUpload';
import { normFile } from '@/utils/utils';
import FileViewer from '@/components/Viewers/FileViewer';
import StandardTable from '@/components/Table/StandardTable';
import SearchForm from '../components/Form/SearchForm';

const setValue = props => {
  const { form } = props;
  form.setFieldsValue({
    name: {
      value: '枫桦苇岸',
      position: {
        lng: 114.179782,
        lat: 30.458348,
      },
    },
    point: '114.28662,30.594699',
  });
};

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    needTotal: true,
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '操作',
    render: record => (
      <OperateButtons
        buttons={[
          {
            key: 'edit',
            name: '编辑',
            onClick: e => {
              console.log(record, e, 'edit');
            },
          },
          {
            key: 'delete',
            name: '删除',
            onClick: e => {
              console.log(record, e, 'delete');
            },
          },
        ]}
        max={3}
        dropdownText="more"
        trigger={['click']}
      />
    ),
  },
];

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const FormMapInput = Form.create()(props => {
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log(values);
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="地图定位">
        {props.form.getFieldDecorator('point', {
          rules: [
            {
              required: true,
              message: 'Please input your E-mail!',
            },
            {
              type: 'email',
              message: 'The input is not valid E-mail!',
            },
          ],
          initialValue: '114.345548,30.553899',
        })(<MapInput />)}
      </Form.Item>
      <Form.Item label="Name">
        {props.form.getFieldDecorator('name', {
          rules: [
            {
              type: 'email',
              message: 'The input is not valid E-mail!',
            },
            {
              required: true,
              message: 'Please input your E-mail!',
            },
          ],
          initialValue: {
            value: '锦绣龙城',
            position: {
              lng: 114.345548,
              lat: 30.553899,
            },
          },
        })(<AddressInput />)}
      </Form.Item>
      <Form.Item label="Uploader">
        {props.form.getFieldDecorator('image', {
          rules: [
            {
              required: true,
              message: 'Please input your E-mail!',
            },
          ],
          getValueFromEvent: normFile,
        })(<DraggerUpload />)}
      </Form.Item>
      <Form.Item label="Uploader">
        {props.form.getFieldDecorator('avatar', {
          rules: [
            {
              required: true,
              message: 'Please input your E-mail!',
            },
          ],
          initialValue: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
        })(<AvatarUpload action="/api/upload" />)}
      </Form.Item>
      <Form.Item>
        <Button
          type="default"
          onClick={() => {
            setValue(props);
          }}
        >
          设置
        </Button>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
});

export default class Welcome extends React.Component {
  state = {};

  render() {
    return (
      <PageHeaderWrapper>
        <Card title="搜索表单">
          <SearchForm
            formItems={[
              {
                label: '借款主体',
                name: 'name',
                component: <Input placeholder="请输入" />,
              },
              {
                label: '借款主体',
                name: 'name2',
                component: <Input placeholder="请输入" />,
              },
              {
                label: '借款主体',
                name: 'name3',
                component: <Input placeholder="请输入" />,
              },
              {
                label: '借款主体',
                name: 'name4',
                component: <Input placeholder="请输入" />,
              },
            ]}
            grid={{ md: 8, sm: 24 }}
            onSubmit={e => console.log(e.getFieldsValue())}
            onReset={form => {
              console.log(form);
            }}
          />
        </Card>
        <Card title="默认按钮样式">
          <Export />
          <Import />
          <Download />
          <OperateButtons
            buttons={[
              {
                key: 'edit',
                name: '编辑',
                onClick: (record, e) => {
                  console.log(record, e, 'edit');
                },
              },
              {
                key: 'delete',
                name: '删除',
                onClick: (record, e) => {
                  console.log(record, e, 'delete');
                },
              },
              {
                key: 'download',
                name: '下载',
                onClick: (record, e) => {
                  console.log(record, e, 'download');
                },
              },
              {
                key: 'export',
                name: '导出',
                onClick: (record, e) => {
                  console.log(record, e, 'export');
                },
              },
            ]}
            max={3}
            record={{
              id: 1,
              name: 'test',
            }}
            dropdownText="more"
            trigger={['click']}
          />
          <br />
        </Card>
        <Card title="地图组件" bodyStyle={{ padding: 0, height: 500 }}>
          <Map>
            <SearchBox
              top={10}
              left={10}
              city="027"
              onSelect={result => {
                console.log(result);
              }}
              onSearch={result => {
                console.log(result);
              }}
              placeholder="搜索小区"
              defaultValue="枫桦苇岸"
            />
            <Address
              top={100}
              left={10}
              city="027"
              onSearch={result => {
                console.log(result);
              }}
            />
          </Map>
        </Card>
        <Card>
          <FormMapInput />
        </Card>
        <Card>
          <ImagesUpload />
        </Card>
        <Card title="单图上传">
          <ImageUpload />
        </Card>
        <Card title="文件导入">
          <ImportUpload />
        </Card>
        <Card title="文件上传">
          <FileUpload />
        </Card>
        <Card title="文件列表">
          <FileViewer
            menus={[{ key: 1, title: '打开' }]}
            onMenuClick={(file, e) => console.log(file, e)}
            dataSource={[
              { uid: 1, name: 'test.png', type: 'image/png', thumbUrl: 'http://www.baidu.com' },
              { uid: 2, name: 'test.pdf', type: 'pdf' },
              { uid: 3, name: 'test.pdf', type: 'pdf' },
              { uid: 4, name: 'test.pdf', type: 'pdf' },
              { uid: 5, name: 'test.pdf', type: 'pdf' },
              { uid: 6, name: 'test.pdf', type: 'pdf' },
              { uid: 7, name: 'test.pdf', type: 'pdf' },
            ]}
          />
        </Card>
        <Card>
          <StandardTable columns={columns} dataSource={dataSource} showSelect />
        </Card>
      </PageHeaderWrapper>
    );
  }
}
